Frontend Monorepo: Hantering av arbetsytor med Lerna och Nx

I den ständigt föränderliga världen av frontendutveckling kan hantering av stora och komplexa projekt vara en betydande utmaning. Traditionella upplägg med flera repos, även om de erbjuder isolering, kan leda till kodduplicering, problem med beroendehantering och inkonsekventa verktyg. Det är här monorepo-arkitekturen briljerar. Ett monorepo är ett enda arkiv som innehåller flera projekt, ofta relaterade, som byggs och versionshanteras tillsammans. Detta tillvägagångssätt erbjuder många fördelar, men att effektivt hantera ett monorepo kräver specialiserade verktyg. Denna artikel utforskar två populära lösningar: Lerna och Nx.

Vad är ett Monorepo?

Ett monorepo är ett versionshanteringssystemarkiv som innehåller kod för många projekt. Dessa projekt kan vara relaterade eller helt oberoende. Nyckeln är att de delar samma arkiv. Företag som Google, Facebook, Microsoft och Uber har framgångsrikt anammat monorepos för att hantera sina massiva kodbaser. Tänk dig att Google lagrar nästan all sin kod, inklusive Android, Chrome och Gmail, i ett enda arkiv.

Fördelar med ett Monorepo

• Koddelning och återanvändning: Dela enkelt kod mellan projekt utan komplexa paket- och publiceringsflöden. Föreställ dig ett designsystembibliotek som smidigt kan integreras i flera applikationer inom samma arkiv.
• Förenklad beroendehantering: Hantera beroenden på ett enda ställe, vilket säkerställer konsekvens över alla projekt. Att uppdatera ett delat biblioteks beroende uppdaterar automatiskt alla projekt som är beroende av det.
• Atomiska ändringar: Gör ändringar som sträcker sig över flera projekt i en enda commit, vilket säkerställer konsekvens och förenklar testning. Till exempel kan en refaktorering som påverkar både frontend och backend göras atomiskt.
• Förbättrat samarbete: Team kan enkelt samarbeta på olika projekt inom samma arkiv, vilket främjar kunskapsdelning och tvärfunktionell utveckling. Utvecklare kan enkelt bläddra och förstå kod mellan olika team.
• Konsekventa verktyg och metoder: Upprätthåll konsekventa kodstandarder, linting-regler och byggprocesser över alla projekt. Detta förbättrar kodkvaliteten och underhållbarheten.
• Förenklad refaktorering: Storskaliga refaktoringsprojekt förenklas eftersom all relaterad kod finns inom samma arkiv. Automatiserade refaktoringsverktyg kan användas över hela kodbasen.

Utmaningar med ett Monorepo

• Arkivstorlek: Monorepos kan bli mycket stora, vilket potentiellt kan sakta ner klonings- och indexeringsoperationer. Verktyg som `git sparse-checkout` och `partial clone` kan hjälpa till att mildra detta problem.
• Byggtider: Att bygga hela monorepot kan vara tidskrävande, särskilt för stora projekt. Verktyg som Lerna och Nx erbjuder optimerade byggprocesser för att åtgärda detta.
• Åtkomstkontroll: Att begränsa åtkomsten till specifika delar av monorepot kan vara komplext. Noggrann planering och implementering av åtkomstkontrollmekanismer krävs.
• Verktygskomplexitet: Att sätta upp och hantera ett monorepo kräver specialiserade verktyg och kunskap. Inlärningskurvan kan vara brant i början.

Lerna: Hantering av JavaScript-projekt i ett Monorepo

Lerna är ett populärt verktyg för att hantera JavaScript-projekt i ett monorepo. Det optimerar arbetsflödet kring hantering av arkiv med flera paket med Git och npm. Det är särskilt väl lämpat för projekt som använder npm eller Yarn för beroendehantering.

Viktiga funktioner i Lerna

• Versionshantering: Lerna kan automatiskt versionshantera och publicera paket baserat på ändringar som gjorts sedan den senaste releasen. Det använder konventionella commits för att bestämma nästa versionsnummer.
• Beroendehantering: Lerna hanterar beroenden mellan paket, vilket säkerställer att paket inom monorepot kan vara beroende av varandra. Det använder symlänkning för att skapa lokala beroenden.
• Uppgiftsutförande: Lerna kan köra kommandon över flera paket parallellt, vilket snabbar upp bygg- och testprocesser. Det stöder körning av skript definierade i `package.json`.
• Ändringsdetektering: Lerna kan upptäcka vilka paket som har ändrats sedan den senaste releasen, vilket möjliggör riktade byggen och driftsättningar.

Exempel på Lerna-användning

Låt oss illustrera Lernas användning med ett förenklat exempel. Antag att vi har ett monorepo med två paket: `package-a` och `package-b`. `package-b` är beroende av `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Initiera Lerna:

lerna init

Detta skapar `lerna.json` och uppdaterar root `package.json`. Filen `lerna.json` konfigurerar Lernas beteende.

2. Installera beroenden:

npm install
# eller
yarn install

Detta installerar beroenden för alla paket i monorepot, baserat på `package.json`-filerna i varje paket.

3. Kör ett kommando över paket:

lerna run test

Detta kör `test`-skriptet definierat i `package.json`-filerna för alla paket som har det definierat.

4. Publicera paket:

lerna publish

Detta kommando analyserar commit-historiken, bestämmer vilka paket som har ändrats, höjer deras versioner baserat på konventionella commits och publicerar dem till npm (eller ditt valda register).

Lerna-konfiguration

Filen `lerna.json` är hjärtat i Lernas konfiguration. Den låter dig anpassa Lernas beteende, såsom:

• `packages`: Anger platsen för paketen inom monorepot. Ofta satt till `["packages/*"]`.
• `version`: Anger versionsstrategin. Kan vara `independent` (varje paket har sin egen version) eller en fast version.
• `command`: Låter dig konfigurera alternativ för specifika Lerna-kommandon, såsom `publish` och `run`.

Exempel på `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Smart, snabbt och utbyggbart byggsystem

Nx är ett kraftfullt byggsystem som tillhandahåller avancerade funktioner för monorepo-hantering. Det fokuserar på inkrementella byggen, beräkningscachelagring och uppgiftsorkestrering för att avsevärt förbättra byggtider och utvecklarproduktivitet. Medan Lerna främst fokuserar på att hantera paket, erbjuder Nx ett mer omfattande tillvägagångssätt för att hantera hela monorepo-arbetsflödet, inklusive kodgenerering, linting, testning och driftsättning.

Viktiga funktioner i Nx

• Inkrementella byggen: Nx analyserar beroendegrafen för dina projekt och bygger endast om de projekt som har ändrats sedan det senaste bygget. Detta minskar byggtiderna dramatiskt.
• Beräkningscachelagring: Nx cachar resultaten av uppgifter, såsom byggen och tester, så att de kan återanvändas om ingångarna inte har ändrats. Detta snabbar ytterligare upp utvecklingscyklerna.
• Uppgiftsorkestrering: Nx tillhandahåller ett kraftfullt system för uppgiftsorkestrering som gör att du kan definiera komplexa byggpipelines och exekvera dem effektivt.
• Kodgenerering: Nx tillhandahåller verktyg för kodgenerering som kan hjälpa dig att snabbt skapa nya projekt, komponenter och moduler, enligt bästa praxis och konsekventa standarder.
• Plugin-ekosystem: Nx har ett rikt plugin-ekosystem som stöder olika tekniker och ramverk, såsom React, Angular, Node.js, NestJS med mera.
• Visualisering av beroendegrafen: Nx kan visualisera beroendegrafen för ditt monorepo, vilket hjälper dig att förstå relationerna mellan projekt och identifiera potentiella problem.
• Affected Commands (påverkade kommandon): Nx tillhandahåller kommandon för att köra uppgifter endast på de projekt som påverkas av en specifik ändring. Detta gör att du kan fokusera dina ansträngningar på de områden som behöver uppmärksamhet.

Exempel på Nx-användning

Låt oss illustrera Nx:s användning med ett förenklat exempel. Vi skapar ett monorepo med en React-applikation och ett Node.js-bibliotek.

1. Installera Nx CLI globalt:

npm install -g create-nx-workspace

2. Skapa en ny Nx-arbetsyta:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Detta skapar en ny Nx-arbetsyta med en React-applikation. Alternativet `--preset=react` talar om för Nx att initiera arbetsytan med React-specifika konfigurationer.

3. Generera ett bibliotek:

nx generate @nrwl/node:library my-library

Detta genererar ett nytt Node.js-bibliotek som heter `my-library`. Nx konfigurerar automatiskt biblioteket och dess beroenden.

4. Bygg applikationen:

nx build my-app

Detta bygger React-applikationen. Nx analyserar beroendegrafen och bygger endast om de nödvändiga filerna.

5. Kör tester:

nx test my-app

Detta kör enhetstesterna för React-applikationen. Nx cachar testresultaten för att påskynda efterföljande testkörningar.

6. Visa beroendegrafen:

nx graph

Detta öppnar ett webbgränssnitt som visualiserar beroendegrafen för monorepot.

Nx-konfiguration

Nx konfigureras via filen `nx.json`, som finns i roten av arbetsytan. Denna fil definierar projekten i arbetsytan, deras beroenden och de uppgifter som kan utföras på dem.

Viktiga konfigurationsalternativ i `nx.json` inkluderar:

• `projects`: Definierar projekten i arbetsytan och deras konfiguration, såsom deras rotkatalog och byggmål.
• `tasksRunnerOptions`: Konfigurerar uppgiftsutföraren, som ansvarar för att utföra uppgifter och cacha deras resultat.
• `affected`: Konfigurerar hur Nx bestämmer vilka projekt som påverkas av en ändring.

Exempel på `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    }
  }
}

Lerna vs. Nx: Vilken ska du välja?

Både Lerna och Nx är utmärkta verktyg för att hantera frontend monorepos, men de tillgodoser något olika behov. Här är en jämförelse som hjälper dig att välja rätt för ditt projekt:

Funktion	Lerna	Nx
Fokus	Pakethantering	Byggsystem och Uppgiftsorkestrering
Inkrementella byggen	Begränsad (kräver externa verktyg)	Inbyggd och högt optimerad
Beräkningscachelagring	Nej	Ja
Kodgenerering	Nej	Ja
Plugin-ekosystem	Begränsat	Omfattande
Inlärningskurva	Lägre	Högre
Komplexitet	Enklare	Mer Komplex
Användningsfall	Projekt som främst fokuserar på att hantera och publicera npm-paket.	Stora och komplexa projekt som kräver optimerade byggtider, kodgenerering och ett omfattande byggsystem.

Välj Lerna om:

• Du främst behöver hantera och publicera npm-paket.
• Ditt projekt är relativt litet till medelstort.
• Du föredrar ett enklare verktyg med en lägre inlärningskurva.
• Du är redan bekant med npm och Yarn.

Välj Nx om:

• Du behöver optimerade byggtider och inkrementella byggen.
• Du vill ha kodgenereringsfunktioner.
• Du behöver ett omfattande byggsystem med uppgiftsorkestrering.
• Ditt projekt är stort och komplext.
• Du är villig att investera tid i att lära dig ett mer kraftfullt verktyg.

Kan du använda Lerna med Nx?

Ja, Lerna och Nx kan användas tillsammans. Denna kombination gör att du kan dra nytta av Lernas pakethanteringsfunktioner samtidigt som du drar nytta av Nx:s optimerade byggsystem och uppgiftsorkestrering. Nx kan konfigureras som en uppgiftsutförare för Lerna, vilket ger inkrementella byggen och beräkningscachelagring för paket som hanteras av Lerna.

Bästa praxis för hantering av Frontend Monorepo

Oavsett om du väljer Lerna eller Nx är det avgörande att följa bästa praxis för att framgångsrikt hantera ett frontend monorepo:

• Upprätta en tydlig projektstruktur: Organisera dina projekt logiskt och konsekvent. Använd en tydlig namngivningskonvention för paket och bibliotek.
• Tillämpa konsekventa kodstandarder: Använd linters och formaterare för att säkerställa konsekvent kodstil över alla projekt. Verktyg som ESLint och Prettier kan integreras i ditt arbetsflöde.
• Automatisera bygg- och testprocesser: Använd CI/CD-pipelines för att automatisera bygg-, test- och driftsättningsprocesser. Verktyg som Jenkins, CircleCI och GitHub Actions kan användas.
• Implementera kodgranskningar: Genomför noggranna kodgranskningar för att säkerställa kodkvalitet och underhållbarhet. Använd pull requests och kodgranskningsverktyg.
• Övervaka byggtider och prestanda: Spåra byggtider och prestandamått för att identifiera flaskhalsar och områden för förbättring. Nx tillhandahåller verktyg för att analysera byggprestanda.
• Dokumentera din monorepo-struktur och processer: Skapa tydlig dokumentation som förklarar strukturen för ditt monorepo, de verktyg och tekniker som används, samt utvecklingsarbetsflödena.
• Anamma konventionella commits: Använd konventionella commits för att automatisera versionshantering och releaseprocesser. Lerna stöder konventionella commits direkt.

Slutsats

Frontend monorepos erbjuder betydande fördelar för hantering av stora och komplexa projekt, inklusive koddelning, förenklad beroendehantering och förbättrat samarbete. Lerna och Nx är kraftfulla verktyg som kan hjälpa dig att effektivt hantera ett frontend monorepo. Lerna är ett utmärkt val för att hantera npm-paket, medan Nx erbjuder ett mer omfattande byggsystem med avancerade funktioner som inkrementella byggen och kodgenerering. Genom att noggrant överväga ditt projekts behov och följa bästa praxis kan du framgångsrikt anta ett frontend monorepo och skörda dess fördelar.

Kom ihåg att beakta faktorer som ditt teams erfarenhet, projektets komplexitet och prestandakrav när du väljer mellan Lerna och Nx. Experimentera med båda verktygen och hitta det som bäst passar dina specifika behov.

Lycka till med din monorepo-resa!